<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .grid-container {
      width: 300px;
      background-color: skyblue;
      /* 网格布局 */
      display: inline-grid;
      /* 定义2行，每行高为100px */
      grid-template-rows: repeat(2, 100px);
      /* 定义3列，列宽自动 */
      grid-template-columns: repeat(3, 100px);
      /* grid-auto-flow: column; */
      margin: 100px;
    }
    .grid-item {
      padding: 10px;
      font-size: 30px;
      color: red;
    }
    .grid-item:nth-child(odd) {
      background-color: pink;
    }
    .grid-item:nth-child(even) {
      background-color: khaki;
    }
  </style>
<body>
    <!-- 
        TIP

        在学习这两个属性前，我们先来了解两个概念

        什么是显示网格？

        使用grid-template-columns和grid-template-rows指定尺寸创建出来行和列形成的网格。

        什么是隐藏网格？

        不是grid-template-columns或grid-template-rows指定尺寸创建出来行和列形成的网格，而是自动布局算法创建的额外的行或列形成的网格。

        grid-auto-columns ：隐式创建的网格纵向轨道（track）的宽度。即设置隐式网格的宽度
        grid-auto-rows：用于指定隐式创建的行轨道大小。即设置隐式网格的高度
        grid-auto-columns与grid-auto-rows的写法与grid-template-columns和grid-template-rows完全相同。
        如果不指定grid-auto-columns与grid-auto-rows这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽或 行高。
    -->

    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
        <div class="grid-item">9</div>
      </div>
</body>
</html>